<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Card - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-section uk-section-default uk-section-small uk-padding-remove-top">
            <div class="uk-container">

                <h1>Card</h1>

                <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
                    <div>

                        <div class="uk-card uk-card-default uk-card-hover">
                            <div class="uk-card-badge">Hot</div>
                            <div class="uk-card-body">
                                <h3 class="uk-card-title">Default</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <p uk-margin>
                                    <a class="uk-button uk-button-default" href="#">Button</a>
                                    <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-primary uk-card-hover">
                            <div class="uk-card-badge">Hot</div>
                            <div class="uk-card-body">
                                <h3 class="uk-card-title">Primary</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <p uk-margin>
                                    <a class="uk-button uk-button-default" href="#">Button</a>
                                    <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-secondary uk-card-hover">
                            <div class="uk-card-badge">Hot</div>
                            <div class="uk-card-body">
                                <h3 class="uk-card-title">Secondary</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <p uk-margin>
                                    <a class="uk-button uk-button-default" href="#">Button</a>
                                    <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-hover">
                            <div class="uk-card-badge">Hot</div>
                            <div class="uk-card-body">
                                <h3 class="uk-card-title">Hover</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                <p uk-margin>
                                    <a class="uk-button uk-button-default" href="#">Button</a>
                                    <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-muted uk-section-small">
            <div class="uk-container">

                <div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
                    <div>

                        <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Default</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Primary</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Secondary</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-primary uk-section-small uk-preserve-color">
            <div class="uk-container">

                <div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
                    <div>

                        <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Default</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Primary</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Secondary</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-secondary uk-section-small uk-preserve-color">
            <div class="uk-container">

                <div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
                    <div>

                        <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Default</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Primary</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                            <h3 class="uk-card-title">Secondary</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section-default ">
            <div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/photo.jpg');">
                <div class="uk-container">

                    <div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
                        <div>

                            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                                <h3 class="uk-card-title">Default</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                            </div>

                        </div>
                        <div>

                            <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
                                <h3 class="uk-card-title">Primary</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                            </div>

                        </div>
                        <div>

                            <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
                                <h3 class="uk-card-title">Secondary</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="uk-container uk-margin-large-top">

            <h2>Media</h2>

            <div class="uk-child-width-1-4@m" uk-grid>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-media-top">
                            <img src="images/photo.jpg" alt="">
                        </div>
                        <div class="uk-card-body">
                            <h3 class="uk-card-title">Media Top</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-body">
                            <h3 class="uk-card-title">Media Bottom</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                        <div class="uk-card-media-bottom">
                            <img src="images/photo.jpg" alt="">
                        </div>
                    </div>

                </div>
                <div class="uk-width-1-2@m">

                    <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
                        <div class="uk-card-media-left uk-cover-container">
                            <img src="images/photo.jpg" alt="" uk-cover>
                            <canvas width="1800" height="1200"></canvas>
                        </div>
                        <div>

                            <div class="uk-card-body">
                                <h3 class="uk-card-title">Media Left</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                            </div>

                        </div>
                    </div>

                    <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
                        <div class="uk-flex-last@s uk-card-media-right uk-cover-container">
                            <img src="images/photo.jpg" alt="" uk-cover>
                            <canvas width="1800" height="1200"></canvas>
                        </div>
                        <div>

                            <div class="uk-card-body">
                                <h3 class="uk-card-title">Media Right</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <h2>Header and Footer</h2>

            <div class="uk-child-width-1-4@m" uk-grid>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-header">
                            <h3 class="uk-card-title">Title</h3>
                        </div>
                        <div class="uk-card-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="uk-card-footer">
                            <p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-media-top">
                            <img src="images/light.jpg" alt="">
                        </div>
                        <div class="uk-card-body">
                            <h3 class="uk-card-title">Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                        <div class="uk-card-footer">
                            <p>
                                <a class="uk-button uk-button-primary" href="#">Button</a>
                                <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
                            </p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-header">
                            <h3 class="uk-card-title">Title</h3>
                        </div>
                        <div class="uk-card-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                        <div class="uk-card-media-bottom">
                            <img src="images/dark.jpg" alt="">
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-header">
                            <div class="uk-grid-small uk-flex-middle" uk-grid>
                                <div class="uk-width-auto">
                                    <img class="uk-border-circle" src="images/avatar.jpg" width="50" alt="">
                                </div>
                                <div  class="uk-width-expand">
                                    <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                                    <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
                                </div>
                            </div>
                        </div>
                        <div class="uk-card-media">
                            <img src="images/light.jpg" alt="">
                        </div>
                        <div class="uk-card-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>

                </div>
            </div>

            <h2>Nav</h2>

            <div class="uk-child-width-1-4@m" uk-grid>
                <div>

                    <div class="uk-card uk-card-default uk-card-body">
                        <ul class="uk-nav uk-nav-default">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>
                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                        </ul>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-primary uk-card-body">
                        <h3 class="uk-card-title">Title</h3>
                        <ul class="uk-nav uk-nav-default">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>
                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                        </ul>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default">
                        <div class="uk-card-header">
                            <h3 class="uk-card-title">Title</h3>
                        </div>
                        <div class="uk-card-body">
                            <ul class="uk-nav uk-nav-default">
                                <li class="uk-active"><a href="#">Active</a></li>
                                <li class="uk-parent">
                                    <a href="#">Parent</a>
                                    <ul class="uk-nav-sub">
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                                <li class="uk-nav-header">Header</li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                <li class="uk-nav-divider"></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                            </ul>
                        </div>
                        <div class="uk-card-footer">
                            <p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-secondary">
                        <div class="uk-card-media-top">
                            <img src="images/dark.jpg" alt="">
                        </div>
                        <div class="uk-card-body">
                            <ul class="uk-nav uk-nav-default">
                                <li class="uk-active"><a href="#">Active</a></li>
                                <li class="uk-parent">
                                    <a href="#">Parent</a>
                                    <ul class="uk-nav-sub">
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                                <li class="uk-nav-header">Header</li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                <li class="uk-nav-divider"></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                            </ul>
                        </div>
                        <div class="uk-card-media-bottom">
                            <img src="images/dark.jpg" alt="">
                        </div>
                    </div>

                </div>
            </div>

            <h2>Small</h2>

            <div class="uk-child-width-1-4@m" uk-grid>
                <div>

                    <div class="uk-card uk-card-default uk-card-small">
                        <div class="uk-card-header">
                            <h3 class="uk-card-title">Title</h3>
                        </div>
                        <div class="uk-card-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="uk-card-footer">
                            <p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default uk-card-small">
                        <div class="uk-card-media-top">
                            <img src="images/light.jpg" alt="">
                        </div>
                        <div class="uk-card-body">
                            <h3 class="uk-card-title">Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default uk-card-body uk-card-small">
                        <ul class="uk-nav uk-nav-default">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>
                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                        </ul>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default uk-card-body uk-card-small">
                        <h3 class="uk-card-title">Title</h3>
                        <ul class="uk-nav uk-nav-default">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>
                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                        </ul>
                    </div>

                </div>
            </div>

            <h2>Large</h2>

            <div class="uk-child-width-1-2@m" uk-grid>
                <div>

                    <div class="uk-card uk-card-default uk-card-large">
                        <div class="uk-card-header">
                            <h3 class="uk-card-title">Title</h3>
                        </div>
                        <div class="uk-card-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="uk-card-footer">
                            <p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default uk-card-large">
                        <div class="uk-card-media-top">
                            <img src="images/light.jpg" alt="">
                        </div>
                        <div class="uk-card-body">
                            <h3 class="uk-card-title">Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default uk-card-body uk-card-large">
                        <ul class="uk-nav uk-nav-default">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>
                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                        </ul>
                    </div>

                </div>
                <div>

                    <div class="uk-card uk-card-default uk-card-body uk-card-large">
                        <h3 class="uk-card-title">Title</h3>
                        <ul class="uk-nav uk-nav-default">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>
                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                        </ul>
                    </div>

                </div>
            </div>

        </div>

    </body>
</html>
